<template>
    <div>
      <a-layout>
        <a-layout-header>Header</a-layout-header>
        <a-layout>
          <a-layout-content><h1>下面是测试</h1>
            <form  enctype=multipart/form-data>
              <p></p>
              <input type="file" @change="getFile($event)">
              <button @click="submitForm($event)">提交</button>
            </form></a-layout-content>
          <a-layout-sider>
            <p></p>
            <span>{{getdata.classify}}</span>
            <p></p>
            <span>{{getdata.state}}</span>
            <p></p>
            <span>{{getdata.type}}</span>
          </a-layout-sider>
        </a-layout>
        <a-layout-footer>Footer</a-layout-footer>
      </a-layout>
      </div>
</template>
  
<script>
  export default {
    name: 'class',
    data: function () {
      return {
        getdata: {
          classify: '**',
          state: '**',
          type: '**'
        }
      }
    },
    methods: {
      getFile (event) {
        this.file = event.target.files[0]
        console.log(this.file)
        console.log(1111)
      },
      submitForm (event) {
        event.preventDefault()
        const formData = new FormData()
        formData.append('file', this.file)
        var that = this
        const config = {
          headers: {
            'Content-Type': 'multipart/form-data'
          }
        }
  
        this.$axios.post('http://www.ai666.site:8799/result', formData, config).then(function (response) {
          if (response.status === 200) {
            var msg = response.data
            that.getdata = msg
            console.log(response.data.classify)
            console.log(response.data)
            console.log(222)
          }
        })
      }
    }
  }
</script>
  
<style scoped>
  
</style>